<template>
  <div>
    <div class="search">
      <input type="text" placeholder="搜索书籍" v-model="pageQueryForm.title"  @keyup.enter="selectArticleInfo(pageQueryForm)"/>
      <button @click="selectArticleInfo(pageQueryForm)">寻找</button>
      <br>
      <span>与有肝胆人共事,从无字句处读书</span>
    </div>
    <div class="container">
        <div class="content" v-for="item in articleList" :key="item.id" v-show="item.top12Children.length !== 0">
            <div class="title">
              {{item.category}}
              <router-link :to="`/library/list?category=` + `${item.category}`"  style="font-size: 14px;margin-left: 10px">查看更多>></router-link>
            </div>
            <div class="list" >
              <div class="item" v-for="book in item.top12Children" :key="book.id">
                <img src="@/assets/img/book2.png" alt="图片正在赶路" @click="toOverview(book.id)">
                <h1>{{ book.title.length >= 10 ?  book.title.substring(0,10) + "..." :book.title}}</h1>
                <span>喜欢</span>
              </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import {findAllCategoryTop12ListApi} from '@/api/article'
export default {
  name: "",
  data() {
    return {
      // 查询条件表单
      pageQueryForm: {

      },
      articleList: [
        {
          category: null,
          top12Children: null
        }
      ]
    }
  },
  methods: {
    // 前往指定文章预览页面
    toOverview(id){
      this.$router.push({
        path: '/library/overview',
        query:{
          id:id
        }
      })
    },
    // 根据条件查询文章分页信息
    selectArticleInfo(params){
      findAllCategoryTop12ListApi(params).then((res) => {
        console.log(res)
        this.articleList = res.data;
      })
    }
  },
  created() {
    this.selectArticleInfo(this.pageQueryForm);
  }
}
</script>

<style scoped lang="scss">
  .search {
    width: 600px;
    height: 60px;
    line-height: 60px;
    margin: 50px auto 100px;
    background-color: white;
    border-radius: 10px;

  }
  .search input {
    width: 500px;
    height: 45px;
    margin-top: 5px;
    text-indent: 10px;
    margin-left: 5px;
    font-size: 18px;
    color: #666666;
    border: 3px solid #fff;
    border-radius: 10px;
    transition: 0.3s linear all;
  }
  .search input:focus {
    border: 3px solid #c2dbfe;
  }
  .search button {
    background-color: #3284fa;
    border-radius: 5px;
    font-size: 18px;
    color: white;
    width: 80px;
    height: 45px;
    margin-left: 5px;
    cursor: pointer;
  }
  .search button:active {
    box-shadow: 0 0 100px 10px #7ecbff inset;
  }

  .search span {
    margin-left: 180px;
    color: #666666;
  }


  .container {
    width: 100%;
    background-color: white;
  }
  .container .content {
    width: 1200px;
    margin: 0 auto;
  }
  .container .content .title{
    font-size: 20px;
    padding: 20px 0;
  }
  .container .content .list{
    display: flex;
    flex-wrap: wrap;
  }
  .container .content .list .item{
    width: 150px;
    height: 280px;
    margin: 10px 25px;
    text-align: center;
    img {
      width: 150px;
      height: 225px;
      cursor: pointer;
    }


    h1 {
      font-size: 15px;
      margin-top: 5px;
    }
  }
</style>